<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/common.jspf"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	$(function() {
		initGrid();
	})
	function initGrid() {
		$('#dg').datagrid({
			rownumbers : true,
			checkOnSelect : true,
			title : "用户列表",
			url : 'user/list',
			width : "100%",
			fitColumns : true,
			pagination : true,
			columns : [ [ {
				field : "id",
				checkbox : true
			}, {
				field : 'account',
				title : '账号',
				width : 100
			}, {
				field : 'name',
				title : '姓名',
				width : 100
			}, {
				field : 'phone',
				title : '电话',
				width : 100
			}, {
				field : 'tel',
				title : '手机号',
				width : 100
			}, {
				field : 'status',
				title : '状态',
				width : 100,
				formatter : function(value, row, index) {
					if (row.status == 1) {
						return "已启用";
					} else {
						return "已禁用";
					}
				}
			},{
				field : 'aa',
				title : '编辑',
				width : 100,
				formatter : function(value, row, index) {
					console.log(row);
					return "<a href='user/tosetroles/"+row.id+"'>设置角色</a>";
				}
			} ] ]
		});
		
		var pager = $('#dg').datagrid().datagrid('getPager');
		pager.pagination({
			displayMsg:"当前显示第 {from} 到 {to} 条数据，共 {total} 条"	
		})
	}

	function toAdd() {
		//显示弹框
		$('#w').window('open');
	}
	function doAdd(){
		$("#addForm").form("submit",{
			dataType:"json",
			type:"post",
			success:function(msg){
				var data = $.parseJSON(msg);
				if(data.code == "OK"){
					$("#dg").datagrid("reload");//刷新表格
					$("#w").window("close");//关闭窗口					
				}
			}
		})
	}
	function doCancel(){
		$("#w").window("close");//关闭窗口
	}
	function toUpdate() {

	}
	function toRemove() {
		var rows = $("#dg").datagrid("getSelections");
		if (rows.length == 0) {
			$.messager.alert('删除提示！', '请选择要删除的行!!!', 'info');
		} else {
			$.messager.confirm('删除提示！', '确认要删除这些用户吗？', function(r) {
				if (r) {
					//发起ajax请求删除
					var ids = "";
					for(var i in rows){
						ids = ids +","+rows[i].id;
					}
					ids = ids.substring(1);
					$.ajax({
						url : "user/del",
						dataType : "json",
						data:{
							ids:	ids
						},
						success : function(msg) {
							if(msg.code == "OK"){
								$.messager.alert("删除提示","删除成功!","info");
								$("#dg").datagrid("reload");
							}else{
								$.messager.alert("删除提示",msg.msg,"error");
							}
						}
					})
				}
			});
		}
	}
</script>
</head>
<body>
	<div style="padding-bottom: 5px;">
		<a href="javascript:void(0);" onclick="toAdd()"
			class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加用户</a>
		<a href="javascript:void(0);" onclick="toUpdate()"
			class="easyui-linkbutton" data-options="iconCls:'icon-edit'">修改用户</a>
		<a href="javascript:void(0);" onclick="toRemove()"
			class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除用户</a>
	</div>
	
	<table id="dg"></table>

	<div id="w" class="easyui-window" title="添加用户"
		data-options="modal:true,resizable:false,maximizable:false,minimizable:false,collapsible:false,closable:false,closed:true,iconCls:'icon-save'"
		style="width: 430px; height: 280px; padding: 10px;">
		<form id="addForm" method="post" action="user/add">
			<table cellpadding="5">
				<tr>
					<td style="width: 80px; text-align: right;">账号:</td>
					<td><input class="easyui-textbox" style="width: 200px"
						type="text" name="account"></input></td>
				</tr>
				<tr>
					<td style="width: 80px; text-align: right;">姓名:</td>
					<td><input style="width: 200px" class="easyui-textbox"
						type="text" name="name"></input></td>
				</tr>
				<tr>
					<td style="width: 80px; text-align: right;">电话:</td>
					<td><input style="width: 200px" class="easyui-textbox"
						type="text" name="phone"></input></td>
				</tr>
				<tr>
					<td style="width: 80px; text-align: right;">手机号码:</td>
					<td><input style="width: 200px" class="easyui-textbox"
						type="text" name="tel"></input></td>
				</tr>
			</table>
		</form>
		<div>
			<label style="width: 200px; margin-left: 100px; color: red">&nbsp;</label>
		</div>
		<div style="text-align: center; padding: 5px">
			<a href="javascript:void(0)" class="easyui-linkbutton"
				style="width: 100px;" onclick="doAdd()" data-options="iconCls:'icon-save'">确认添加</a> <a
				href="javascript:void(0)" class="easyui-linkbutton"
				style="width: 100px; margin-left: 20px" onclick="doCancel()"
				data-options="iconCls:'icon-undo'">取消操作</a>
		</div>
	</div>

</body>
</html>